<template>
    <div class="bi-card card">
        <div class="card-header" v-if="$slots.action || title || icon">
            <div class="card-title">
                <bi-icon :data="icon" v-if="icon" ></bi-icon>
                <span>{{title}}</span>
            </div>
            <div class="card-action" v-if="$slots.action">
                <slot name="action"></slot>
            </div>
        </div>
        <div class="card-body">
             <slot></slot>
        </div>
        <div class="card-footer" v-if="$slots.footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>


<script>
export default{
    name:'bi-card',
    props:{
        title:{
            type:String,
            default:''
        },
        icon:{
            type:String,
            default:''
        },
    }
}
</script>

<style>
.card{
    border: none;
}

.bi-card .card-header{
    background-color: transparent;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--bs-card-title-spacer-y);
}

.bi-card .card-header .card-title{
    margin-bottom: 0;
}

.card-header + .card-body{
    padding-top: 0;
}

.card-footer{
    background-color: transparent;
    border-top: none;
}

</style>